<template>
  <!--左侧目录页-->
  <div class="left-folder">
    <template v-for="(item,index) in fileTypeData">
      <div @click="selectFolderItem(item.id)"
           :class="[item.id===selectedFoldItem?'left-folder-item-selected':'left-folder-item']">
        <div>
          <Icon type="md-folder" size="28" color="#f0d67e"/>
          <Tooltip :content="item.name" placement="top" :transfer="true">
            <div class="name">{{ item.name }}</div>
          </Tooltip>
        </div>
        <div v-if="item.id !== -1 && item.id !== 0">
          <Dropdown style="cursor:pointer;" trigger="hover" :transfer="true" @on-click="handleClick">
            <Icon type="ios-more" size="28"/>
            <template #list>
              <DropdownMenu>
                <DropdownItem :name="'editFileType'+','+item.id" v-perms="['file_type/edit']">重命名</DropdownItem>
                <DropdownItem :name="'delFileType'+','+item.id" v-perms="['file_type/del']">删除</DropdownItem>
              </DropdownMenu>
            </template>
          </Dropdown>
        </div>
      </div>
    </template>
    <div class="left-folder-bottom">
      <Divider/>
      <Button type="default" size="large" @click="handleAdd" v-preventReClick v-perms="['file_type/add']">添加分组</Button>
    </div>
  </div>
  <Modal
      v-model="fileTypeEditShow"
      :footer-hide="true"
      :title="modalTitle"
      width="40%">
    <FileTypeEdit ref="fileTypeEditRef" v-if="fileTypeEditShow"/>
    <div slot="footer" style="display: flex;justify-content:right;margin-top: -10px" class="btn-group">
      <Button type="default" @click="cancel" v-preventReClick>取消</Button>
      <Button type="primary" @click="addFileType" v-preventReClick>确定</Button>
    </div>
  </Modal>
</template>

<script setup>

import {getCurrentInstance, inject, nextTick, onMounted, ref} from "vue";
import {FileTypeService} from "@/api/filetype";
import FileTypeEdit from "@/components/file-type-edit";
import {deepCloneObj, sortArray} from "@/api/utils";
import {commonStore} from "@/store/store";

const {proxy} = getCurrentInstance();

const emit = defineEmits(['setTid']);

const fileTypeData = ref([]);

const selectedFoldItem = ref(-1);

const fileTypeEditShow = ref(false);

const modalTitle = ref('添加附件类别');

const reload = inject('reload');

const getFileType = async () => {
  const {data} = await FileTypeService.GetFileTypeLists();
  commonStore().setFileTypeDatum(deepCloneObj(data.data));
  data.data.push({
    id: -1,
    name: '全部',
    selected: true,
  }, {
    id: 0,
    name: '未分类',
    selected: false
  });
  fileTypeData.value = sortArray(data.data, 'DESC', 'id');
}

const selectFolderItem = (index) => {
  // console.log(index)
  // console.log(selectedFoldItem.value)
  if (selectedFoldItem.value !== index) {
    fileTypeData.value[fileTypeData.value.findIndex(e => e.id === selectedFoldItem.value)].selected = false;
    selectedFoldItem.value = index;
    fileTypeData.value[fileTypeData.value.findIndex(e => e.id === index)].selected = true;
  }
  setTid();
}

const handleAdd = async () => {
  fileTypeEditShow.value = true;
  await nextTick();
  proxy.$refs.fileTypeEditRef.mode = 'add';
}

const cancel = () => {
  fileTypeEditShow.value = false;
}

const addFileType = async () => {
  proxy.$refs.fileTypeEditRef.addFileTypeData();
}

const handleClick = async (name) => {
  const param = name.split(',')
  switch (param[0]) {
    case 'editFileType':
      fileTypeEditShow.value = true;
      modalTitle.value = '编辑附件类型';
      await nextTick();
      proxy.$refs.fileTypeEditRef.mode = 'edit';
      await proxy.$refs.fileTypeEditRef.getDetail({id: param[1]});
      break;
    case 'delFileType':
      let p = {id: param[1]};
      proxy.$Modal.confirm({
        title: '删除操作确认',
        content: '<p>确定执行删除操作?执行成功后数据将不可恢复。</p>',
        onOk: () => {
          delFileType(p);
        },
        onCancel: () => {
          return;
        }
      })
      break;
    default:
      break;
  }
}

const delFileType = async (param) => {
  const {data} = await FileTypeService.DelFileType(param);
  if (data.code === 200) {
    proxy.$Message.success({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        reload();
      }
    })
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        Promise.reject()
      }
    })
  }
}

const setTid = () => {
  emit('setTid', selectedFoldItem.value)
}

onMounted(() => {
  getFileType();
})

</script>

<style scoped lang="less">
@import "file-type-tree.less";
</style>
